<template>
	<view class="mine">
		<view class="minetop">
			<view class="minetopl">
				<view class="minetopll">
					<image src="../../static/icons/user.png" mode="aspectFit"></image>
				</view>
				<view class="minetoplr" v-if="!userinfo" @click="bang()">
					未登录
				</view>
				<view class="minetoplr" v-if="userinfo">
					{{userinfo.name}}
				</view>
			</view>
			<view class="minetopr">

			</view>
		</view>
		<view class="jifen">
			<view class="jiitem">
				会员积分<span>{{userinfo.score?userinfo.score:"-"}}</span>
			</view>
			<view class="jiline">
				|
			</view>
			<view class="jiitem">
				信誉积分<span>{{userinfo.creditcode?userinfo.creditcode:"-"}}</span>
			</view>
		</view>
		<view class="navlist">
			<view class="navitem" v-for="item in navlist" @click="gonav(item)">
				<image :src="item.img" mode="aspectFit"></image>
				<p>{{item.name}}</p>
			</view>

		</view>
	<!-- 	<view class="" style="font-size: 30rpx;font-weight: blod;line-height: 80rpx;text-align: center;">
			{{wechatCode}}
		</view> -->   
		<u-popup :show="showw" :round="10" mode="center" width="80%" :closeable="true" @close="closee" height="100vh" border-radius="10">
			<view class="pop">
				<!-- <view class="poptop">
					<u-navbar :custom-back="cancell" :is-back="true" :title-bold="true" title="健康卡授权"></u-navbar>
				</view> -->
				<view class="cardimg">
					<image src="../../static/icons/cardicon.png" mode=""></image>
				</view>
				<view class="hosname">
					河南预约挂号平台
				</view>
				<view class="" v-if="showpp">
					<health-card-login encrypt="true" authLogin="false" @authFail="authFail" @authSucess="authSuccess" :authCancel="authCancel"
					 wechatcode="true">
						<view class="foott">
							<view @click="hideComponentLogin()" class="agree">一键登录授权</view>
						</view>
						<view class="shuoming">
							登录代表同意<span @click="goxieyi()">《用户服务协议与隐私政策》</span>并授权使用您的账号信息以便您统一管理
						</view>
					</health-card-login>
				</view>
			</view>
		</u-popup>
		<u-modal :show="show" title="温馨提示" @close="close()" :closeOnClickOverlay="true" :content='content'
			@cancel="cancel()" :showCancelButton="true" @confirm="contihuan()"></u-modal>
	</view>
</template>

<script>
	import homeApii from '@/api/homee'
	export default {
		data() {
			return {
				showw:false,
				showpp: false,
				navlist: [{
						name: "我的挂号",
						img: "../../static/icons/mgua.png"
					},
					{
						name: "我的关注",
						img: "../../static/icons/mshou.png"
					},
					{
						name: "电子健康卡",
						img: "../../static/icons/mjia.png"
					},
					{
						name: "设置",
						img: "../../static/icons/mset.png"
					},

				],
				token: "",
				userinfo: "",
				show: false,
				content: "",
				huanphone:"",
				wechatCode:""
			}
		},
		onLoad() {
			
		},
		onShow() {
			uni.removeStorageSync("healthCode")
let token = uni.getStorageSync("token")
			if (token) {
				this.token = token
				this.getuserinfo()
			} else {
				this.gettoken()
			}
		},
		methods: {
			
			contihuan() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				homeApii.newphone({
					userinfoid: this.userinfo.userid,
					token:this.token,
					phone: this.huanphone
				}).then(res => {
					uni.hideLoading()
					this.show = false
					if (res.code == 4000) {
						uni.showToast({
							title: "成功"
						})
					}
				})
			},
			close() {
				this.show = false
				this.getuserinfo()
			},
			cancel() {
				this.show = false
				this.getuserinfo()
			},
			bang() {
				if (this.wechatCode) {
				
					uni.navigateTo({
						url: `/pages/mine/addcard/addcard?wechatCode=${this.wechatCode}`
					})
				console.log(this.wechatCode,'1111')
				} else {
					this.login()
				}
				// my.getAuthCode({
				// 	scopes: 'auth_user',
				// 	success: res => {
				// 		const authCode = res.authCode;
				// 		console.log(authCode, "这是授权")
				// 		uni.showLoading({
				// 			title: '加载中',
				// 			mask: true
				// 		});
				// 		homeApii.register({
				// 			authCode: authCode
				// 		}).then(res => {
				// 			console.log(res)
				// 			uni.hideLoading()
				// 			if (res.code == 4000) {
				// 				this.getuserinfo()
				// 				if (res.data.flag == true) {
				// 					this.content = "您在该平台已绑定手机号为" + res.data.stockphone + "是否要替换？"
				// 					this.show = true
				// 					this.huanphone=res.data.phone
				// 				}
				// 			}
				// 		})
				// 	},
				// 	fail: err => {
				// 		console.log('my.getAuthCode 调用失败', err)
				// 	}
				// });
			},
			closee(){
				this.showw=false
			},
			authSuccess(data) {
				uni.hideLoading()
				let res = data.detail
				// 同 plugin.login，用户同意授权，获取登录信息，处理后续业务
				this.todo(res)
			},
			
			// 用户取消授权，授权失败回调
			authCancel() {
				uni.hideLoading()
			
			},
			
			// 业务代码（成功获取登录数据）
			todo(res) {
				// 传入参数 wechatcode = true 结果输出 wechatCode ，注意大小写
				// 传入参数 healthcode = true 及健康卡卡号 ecard_no，输出healthCode
				this.wechatCode = res.result.wechatCode
				if (this.wechatCode) {
					
					uni.navigateTo({
						url: `/pages/mine/addcard/addcard?wechatCode=${this.wechatCode}`
					})
					// console.log(this.wechatCode ,"111")
				} else {
					this.login()
				}
			
			},
			cancell() {
				this.showw = false
				this.showpp = false
			},
			hideComponentLogin() {
				this.showw = false
				uni.showLoading()
			},
			login() {
				const plugin = requirePlugin('myPlugin')
				// plugin.login(callback, options)
				plugin.login((isok, res) => {
					console.log('plugin.login: ', isok, res)
					if (res.result.type !== 3) {
						// 用户在微信授权过，可直接获取登录信息，处理后续业务
						this.todo(res)
					} else {
						// 用户未授权，需要用户同意授权
						// 显示 healthCardLogin 登录组件，引导用户同意授权
						this.showw = true 
						this.showpp = true
					}
				}, {
					wechatcode: true
				})
			},
			getuserinfo() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				homeApii.getuserinfoo({
					token: this.token
				}).then(res => {
					uni.hideLoading()
					console.log(res)
					if (res.code == 4000) {
						this.userinfo = res.data.userinfo
						this.$forceUpdate();
					}else if(res.code==4007){
						this.userinfo=""
						// this.bang()
					}

				})
			},
			gettoken() {
				uni.login({
					provider: 'weixin',
					success: (re) => {
						console.log(re)
						let code = res.code
						// this.getopenid()
						const authCode = res.authCode;
						homeApii.getopenid({
							code: code
						}).then(res => {
							console.log(res)
							if (res.code == 4000) {
								uni.setStorageSync("token", res.data.token)
								this.$store.state.doc.token = res.data.token
								this.token = res.data.token
								resovle()
							}
						})
					},
				})
				// my.getAuthCode({
				// 	scopes: 'auth_base',
				// 	success: res => {
				// 		const authCode = res.authCode;
				// 		uni.showLoading({
				// 			title: '加载中',
				// 			mask: true
				// 		});
				// 		homeApii.getopenid({
				// 			code: authCode
				// 		}).then(res => {
				// 			uni.hideLoading()
				// 			console.log(res)
				// 			uni.setStorageSync("token", res.data.token)
				// 			this.token = res.data.token
				// 			if(this.token){
				// 				this.getuserinfo()
				// 			}
				// 		})
				// 	},
				// 	fail: err => {
				// 		console.log('my.getAuthCode 调用失败', err)
				// 		uni.showToast({
				// 			title: "取消授权，您将无法享用完整服务。"
				// 		})
				// 	}
				// });
			},
			gonav(item) {
				if(item.name=="电子健康卡"||item.name=="我的挂号"){
					if (this.userinfo) {
						if (item.name == "电子健康卡") {
							uni.navigateTo({
								url: "/pages/mine/people/people"
							})
						}
					
						if (item.name == "我的挂号") {
							uni.navigateTo({
								url: "mineorder/mineorder"
							})
						}
						
					} else {
						this.bang()
					}
				}else if (item.name == "设置") {
					uni.navigateTo({
						url: "mineset/mineset"
					})
				}else if (item.name == "我的关注") {
					uni.navigateTo({
						url: "minefollow/minefollow"
					})
				}
				
				
			}
		}
	}
</script>
<style>
	.u-modal__content{
		text-align: center;
	}
	.u-popup__content{
		width: 700rpx;
	}
</style>
<style scoped lang="scss">
	.mine {
		background-color: #F3F8FD;
		height: 100vh;
		overflow: hidden;
		padding-top: 100rpx;
	.pop {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
		margin-top: 150rpx;
		padding-bottom: 30rpx;
	
		.poptop {
			width: 100%;
		}
	
		.cardimg {
			width: 150rpx;
			height: 150rpx;
			margin: 0 auto;
			margin-top: 10rpx;
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.hosname {
			width: 95%;
			margin: 0 auto;
			text-align: center;
			font-size: 50rpx;
			font-weight: bold;
			margin-top: 80rpx;
		}
	
	
	
		.title {
			width: 100%;
			text-align: center;
			margin-top: 18rpx;
			font-size: 32rpx;
			color: #333;
			font-weight: 550;
		}
	
		.info {
			width: 80%;
			margin: 0 auto;
			margin-top: 10rpx;
			font-size: 28rpx;
		}
	
		.shuoming {
			width: 95%;
			margin: 0 auto;
			font-size: 28rpx;
			color: #999;
			line-height: 40rpx;
			margin-top: 80rpx;
	
			span {
				color: orange;
			}
	
		}
	
		.foott {
			width: 80%;
			margin: 0 auto;
			display: flex;
			// margin-top: 20rpx;
			justify-content: space-between;
	
	
	
			.agree {
				width: 80%;
				height: 90rpx;
				margin: 0 auto;
				font-size: 34rpx;
				color: #fff;
				border-radius: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #3669F8;
				margin-top: 100rpx;
			}
		}
	}
	
		.minetop {
			width: 85%;
			margin: 0 auto;
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;

			.minetopl {
				display: flex;

				.minetopll {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.minetoplr {
					font-size: 44rpx;
					line-height: 90rpx;
					margin-left: 20rpx;
					font-weight: bold;
				}
			}

			.minetopr {
				// width: 50rpx;
				// height: 40rpx;
				// background-color: red;
			}
		}

		.jifen {
			width: 85%;
			margin: 30rpx auto;
			display: flex;
			position: relative;
			line-height: 50rpx;

			.jiitem {
				width: 50%;
				text-align: center;
				font-size: 24rpx;

				span {
					font-size: 38rpx;
					font-weight: bold;
					margin-left: 10rpx;
				}
			}

			.jiline {
				position: absolute;
				left: 50%;
				color: #999999;
				font-size: 22rpx;
			}
		}

		.navlist {
			width: 93%;
			margin: 40rpx auto;
			display: flex;
			background-color: #fff;
			border-radius: 15rpx;

			.navitem {
				width: 25%;
				text-align: center;
				padding-bottom: 20rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-top: 20rpx;
				}

				p {
					font-size: 24rpx;
					line-height: 50rpx;
					color: #333333;
				}
			}
		}
	}
</style>
